import {View, Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert ,Image,Pressable} from 'react-native';
import { styles} from './MyStyle';
import {MyButton01, showToast} from './UiComponents';

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';

import { BackButton } from './UiComponents';

import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { Center,Box } from 'native-base';

// https://redux.js.org/introduction/getting-started
// npm install redux react-redux


export function MyBox2() {
return  (
  <View style={styles.container}>


<View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
  <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'yellow' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'yellow' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'yellow' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
  <View style={{ width: 100, height: 100, backgroundColor: 'yellow' }} />
</View>


<View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start' }}>
  <Text>Aligned at the start</Text>
  <Text>Aligned at the start111111111</Text>
</View>

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
  <Text>Centered vertically</Text>
  <Text>Centered vertically222222222222222222222</Text>
</View>

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end' }}>
  <Text>Aligned at the end</Text>
  <Text>22222222222222222Aligned at the end222222222222222</Text>
</View>




  <Box p={4}  bg="lightBlue.400"   width={100}
  height={100}
  >
    <Text color="white">Hello</Text>
    <Text color="white">Hello</Text>
    <Text color="white">Hello</Text>
    <Text color="white">Hello</Text>
    <Text color="white">Hello</Text>
    <Text color="white">Hello123</Text>
    <Text color="white">Hello123</Text>
    <Text color="white">Hello123</Text>
    <Text color="white">Hello123</Text>
    <Text color="white">Hello123</Text>
    <Text color="white">Hello123</Text>
    <Text color="white">Hello123</Text>
  </Box>

  <MyBox></MyBox>
  </View>
);
}

export function MyBox() {
  return (
    <View style={styles.container}>
      {/* 默认放置在 (0, 0) */}
      <View style={styles.child}>
        <Text style={styles.text}>I'm at (0, 0)</Text>
      </View>

      {/* 添加其他子组件 */}
      <View style={[styles.child1, { backgroundColor: 'lightcoral' }]}>
        <Text style={styles.text}>Another at (0, 0)</Text>
      </View>
    </View>
  );
  }
  







function Pay1(){
return       <Pressable
style={({ pressed }) => [
  styles.button,
  { opacity: pressed ? 0.8 : 1 }, // 根据按下状态调整透明度
]}
onPress={() => 
  showToast("hi")
  // alert('Button Pressed!')
}
>
<View style={styles.frame}>
<View style={{height:100/3.5}}></View>
<Image style={{
width:200/3.5,
height:200/3.5
}}  source={require('./assets/abc.png')} 
/>
<View style={{height:70/3.5}}></View>
<Text style={styles.text48}>进入3D场景替换</Text>
<View style={{height:21/3.5}}></View>
<Text style={styles.text20}>至大屏端选择任务进行</Text>
</View>
</Pressable>;
}

function Pay(){
  return       <Pressable
  style={({ pressed }) => [
    styles.button,
    { opacity: pressed ? 0.8 : 1 }, // 根据按下状态调整透明度
  ]}
  onPress={() => 
    showToast("hi")
    // alert('Button Pressed!')
  }
  >
  <View style={styles.frame}>
  <View style={{height:100/3.5}}></View>
  <Image style={{
  width:200/3.5,
  height:200/3.5
  }}  source={require('./assets/qaw.png')} 
  />
  <View style={{height:70/3.5}}></View>
  <Text style={styles.text48}>进行渲染支付</Text>
  </View>
  </Pressable>;
  }
  
  





